<template>
	<div>
		<div>
			<Row style="text-align: left;margin-top: 41px;">
				<Col span="12" style="text-align: left;">
				<span style="border-left: 5px solid #517EDB;font-size: 16px;"></span>
				<span style="font-size: 16px;font-weight: 800;margin-left: 41px;">成绩列表</span>
				</Col>
			</Row>
			<Row style="padding:35px 40px 0px 45px;width: 100%;">
				<Col span="24" style="text-align: left;display: inline-block;">
				<span style="margin: 0 10px ;">选科班级：</span>
				<Select v-model="xkpkclass" @on-change="xkpkclassChange" style="width: 150px;text-align: center;">
					<Option v-for="item in xkpkclassList" :value="item.value" :key="item.value">{{item.label}}</Option>
				</Select>
				<span style="margin: 0 10px 0 30px; ">选科科目：</span>
				<Select v-model="xkpkcombination" @on-change="combinationChange" style="width: 150px;text-align: center;">
					<Option v-for="item in combinationList" :value="item.combinationid" :key="item.combinationid">{{item.combination}}</Option>
				</Select>
				<Input v-model="xkpksearch" type="text" placeholder="请输入关键词" style="margin: 0 5px 0 40px; text-align: center; width: 150px;position: relative;"></Input>
				<Button type="primary" @click="search">搜索</Button>
				<div style="display: inline-block;position: relative;float: right; margin-right: 20px;">
					<Tooltip content="导入" theme="light">
						<Button style="font-size: 5px;" @click="daoru" icon="iconfont alicon-daoru"></Button>
					</Tooltip>
					<Tooltip content="导出" theme="light">
						<Button @click="daochu" icon="iconfont alicon-daochu"></Button>
					</Tooltip>
				</div>
				</Col>
			</Row>

			<div style="min-height: 300px; padding-bottom:20px ;border-bottom: 1px solid #CCCCCC;">
				<Row style="margin:0 auto;margin:20px 45px 5px 45px;color: #666666;border-radius: 10px; background-color: #f0f8ff;padding: 10px 0;">
					<Col span="3" style="text-align: center;width: 6%;">
					<span style="font-size: 16px;">序号</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">姓名</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">学号</span>
					</Col>
					<Col span="3" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">行政班</span>
					</Col>
					<Col span="3" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">语文</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">数学</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">英语</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">政治</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">历史</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">地理</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">物理</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">化学</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">生物</span>
					</Col>
				</Row>
				<Row v-for="item in xkpkdetailList" :key="item.itemId" style="margin:0 auto;margin:20px 45px 5px 45px;">
					<Col span="3" style="text-align: center;width: 6%;">
					<span style="font-size: 16px;">{{item.itemId}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">{{item.stuname}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 12%;">
					<span style="font-size: 16px;">{{item.stunum}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.stuclass}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.chi}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.eng}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.mat}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.wuli}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.huaxue}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.shengwu}}&nbsp;</span>
					</Col>
					<Col span="4" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.dili}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.lishi}}&nbsp;</span>
					</Col>
					<Col span="3" style="text-align: center;width: 7%;">
					<span style="font-size: 16px;">{{item.zhengzhi}}&nbsp;</span>
					</Col>

					</Col>
				</Row>
			</div>
			<div style="text-align: center;display: block;width: 100%;">
				<Page :page-size="pageSize" style="display: inline-block;margin: 15px auto; width: 80%; text-align: right;" :current="current" :total="recordCount" @on-change="pageChange" />
				<span style="display: inline-block;float: left;line-height: 32px; padding: 15px 0 15px 45px;">共有{{recordCount}}条记录</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				current: 1,
				recordCount: 0, //总条数
				pageSize: 10,
				xkpkclass:1,
				xkpkcombination:1,
				xkpksearch:"",
				combinationList: [
				{
					combinationid: 1,
					combination: "全部"
				}, 
				{
					combinationid: 2,
					combination: "语文"
				}, 
				{
					combinationid: 3,
					combination: "数学"
				},
				{
					combinationid: 4,
					combination: "英语"
				},
				{
					combinationid: 5,
					combination: "政治"
				},
				{
					combinationid: 6,
					combination: "历史"
				},
				{
					combinationid: 7,
					combination: "地理"
				},
				{
					combinationid: 8,
					combination: "物理"
				},
				{
					combinationid: 9,
					combination: "化学"
				},
				{
					combinationid: 10,
					combination: "生物"
				},
				],
				xkpkclassList: [{
						value: 1,
						label: "全部"
					},
					{
						value: 2,
						label: "A班"
					},
					{
						value: 3,
						label: "B班"
					},
					{
						value: 4,
						label: "C班"
					},
					{
						value: 5,
						label: "D班"
					},
				],
				xkpkdetailList:[
				{
					itemId:"1",
					stuname:"陈居宁",
					stunum:"20190101",
					stuclass:"A",
					chi:"127.5",
					eng:"112.5",
					mat:"124.5",
					wuli:"88",
					huaxue:"83",
					shengwu:"88",
					dili:"86",
					lishi:"81",
					zhengzhi:"78",
				},
				{
					itemId:"2",
					stuname:"孙荟楠",
					stunum:"20190102",
					stuclass:"B",
					chi:"127.5",
					eng:"121.5",
					mat:"124.5",
					wuli:"81",
					huaxue:"83",
					shengwu:"89",
					dili:"78",
					lishi:"83",
					zhengzhi:"82",
				},
				{
					itemId:"3",
					stuname:"林海天",
					stunum:"20190103",
					stuclass:"A",
					chi:"127.5",
					eng:"127",
					mat:"124.5",
					wuli:"80",
					huaxue:"78",
					shengwu:"77",
					dili:"89",
					lishi:"80",
					zhengzhi:"88",
				},
				{
					itemId:"4",
					stuname:"王嘉麟",
					stunum:"20190104",
					stuclass:"A",
					chi:"127.5",
					eng:"122",
					mat:"124.5",
					wuli:"81",
					huaxue:"83",
					shengwu:"89",
					dili:"78",
					lishi:"83",
					zhengzhi:"82",
				},
				{
					itemId:"5",
					stuname:"陈克枫",
					stunum:"20190105",
					stuclass:"A",
					chi:"123.5",
					eng:"111.5",
					mat:"121.5",
					wuli:"78",
					huaxue:"88",
					shengwu:"89",
					dili:"87",
					lishi:"78",
					zhengzhi:"88",
				},
				{
					itemId:"6",
					stuname:"李心苗",
					stunum:"20190106",
					stuclass:"A",
					chi:"126",
					eng:"127",
					mat:"125",
					wuli:"98",
					huaxue:"88",
					shengwu:"78",
					dili:"67",
					lishi:"87",
					zhengzhi:"88",
				},
				{
					itemId:"7",
					stuname:"王思蕲",
					stunum:"20190107",
					stuclass:"A",
					chi:"126",
					eng:"125.5",
					mat:"124.5",
					wuli:"88",
					huaxue:"85",
					shengwu:"76",
					dili:"78",
					lishi:"89",
					zhengzhi:"81",
				},
				{
					itemId:"8",
					stuname:"孙圣时",
					stunum:"20190108",
					stuclass:"A",
					chi:"125",
					eng:"123.5",
					mat:"124.5",
					wuli:"87",
					huaxue:"89",
					shengwu:"81",
					dili:"78",
					lishi:"88",
					zhengzhi:"82",
				},
				{
					itemId:"9",
					stuname:"陈润瑜",
					stunum:"20190109",
					stuclass:"A",
					chi:"123",
					eng:"129",
					mat:"130",
					wuli:"88",
					huaxue:"82",
					shengwu:"83",
					dili:"88",
					lishi:"78",
					zhengzhi:"85",
				},
				{
					itemId:"10",
					stuname:"陈宇辉",
					stunum:"20190110",
					stuclass:"A",
					chi:"122",
					eng:"123",
					mat:"133",
					wuli:"85",
					huaxue:"88",
					shengwu:"86",
					dili:"82",
					lishi:"78",
					zhengzhi:"90",
				},
				{
					itemId:"11",
					stuname:"陈冠旭",
					stunum:"20190111",
					stuclass:"A",
					chi:"129",
					eng:"122",
					mat:"130",
					wuli:"88",
					huaxue:"79",
					shengwu:"77",
					dili:"83",
					lishi:"82",
					zhengzhi:"89",
				},
				
				],
			}
		},
		created() {
			
			this.handleListApproveHistory()

		},
		methods:{
			xkpkclassChange:function(){},
			search:function(){},
			daoru:function(){},
			daochu:function(){},
			combinationChange:function(){},
			pageChange: function(value) {
				this.xkpkdetailList = []
				this.current = value;
			},
			handleListApproveHistory: function() {

				// 保存取到的所有数据
				this.ajaxHistoryData = this.xkpkdetailList
				this.recordCount = this.xkpkdetailList.length;
				// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
				if(this.xkpkdetailList.length < this.pageSize) {
					this.xkpkdetailList = this.ajaxHistoryData;
				} else {
					this.xkpkdetailList = this.ajaxHistoryData.slice(0, this.pageSize);
				}

			},
			pageChange: function(index) {
				var _start = (index - 1) * this.pageSize;
				var _end = index * this.pageSize;
				this.xkpkdetailList = this.ajaxHistoryData.slice(_start, _end);
			},
		}
	}
</script>

<style>
</style>